<template>
  <el-image class="iep-image" :src="ossSrc" :preview-src-list="previewSrcList" v-bind="$attrs">
    <div slot="placeholder" class="image-slot">
      加载中
      <span class="dot">...</span>
    </div>
    <div slot="error" class="image-slot">
      <svg class="iep-icon" aria-hidden="true">
        <use xlink:href="#iep2-iconicanlogo" />
      </svg>
    </div>
  </el-image>
</template>
<script>
export default {
  name: 'IepImg',
  inheritAttrs: false,
  props: {
    previewSrcList: {
      type: Array,
      default: () => []
    },
    src: {
      required: true,
      validator: prop =>
        typeof prop === 'string' || prop === null || prop === undefined
    },
    xOssProcess: {
      type: String,
      default: 'image/resize'
    },
    resizeOpt: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    ossSrc () {
      // TODO: 如果APP能解决不会拼接问题可以去掉这个判断
      if (this.src && this.src.split('?').length >= 2) {
        return this.src
      } else {
        return this.src
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.iep-image {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: #ddd;
  &::v-deep img {
    width :100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%
  }
}
.iep-image ::v-deep .el-image__inner {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 20%;
  background: #f5f7fa;
  color: #909399;
  .iep-icon {
    font-size: 40px;
  }
}
</style>
